<template>
  <div class="bigBox" id="bigBox">
    <div class="addBox">
        <div class="add">
          <el-upload
            class="upload-demo"
            drag
            action="http://1.12.58.122:3007/api/zhutu2"
            multiple
            :on-success="handleSuccess"
            :disabled="value"
            >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </div>
    </div>
    <div class="PicBigBox">
      <div class="picBox" id="container" >
        <div class="item"  v-for="(item,index) in imgUrl" :key="index" id="item">
          <div class="pic">
            <img :src="'http://1.12.58.122:3007'+item.url" v-lazy>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import {mapState} from 'vuex'
export default {
    name:'myPic',
    data(){
      return {
        key:1,
        value:true
      }
    },
    methods:{
      minIndex(min, hrr) {
        for (var i = 0; i < hrr.length; i++) {
            if (hrr[i] == min) {
                return i;
            }
        }
      },
      fWaterFall(){
        const container = document.getElementById('container')
        // 获取可视区域的宽度
        const clientWidth = document.documentElement.clientWidth
        // 获取到页面所有class为item的元素
        const oItem = document.getElementsByClassName('item')
        // 获取其中一个item的宽度
        const itemWidth = oItem[0].offsetWidth
        // 获取一行的个数
        const num = Math.floor( clientWidth / itemWidth)
        // 设置container的宽度
        container.style.width = num * itemWidth + 'px'
        // 承载盒子高度的数组
        const hrr = [];
        for (var i = 0; i < oItem.length; i++) {
        if (i < num) {
            // 第一排
            hrr.push(oItem[i].offsetHeight)
            // console.log(hrr)
        } else {
            // 第一排之后
            // 得到高度最小值
            const minHeight = Math.min(...hrr)
            // 得到最小值的索引
            const index = this.minIndex(minHeight, hrr)
            // 设置样式
            oItem[i].style.position = "absolute"
            oItem[i].style.left = index * itemWidth + 'px'
            oItem[i].style.top = minHeight + 'px'
            // 改变数组最小值，让其合理摆放
            hrr[index] += oItem[i].offsetHeight
        }
        }
        const maxHeight = Math.max(...hrr)
        container.style.height = maxHeight +15+ 'px'
      },
      handleSuccess(file){
        console.log(file)
        this.$message({
          message: '上传图片成功啦',
          type: 'success'
        });
      },
    }, 
    computed:{
      ...mapState(['imgUrl'])
    },
    mounted(){
     if(sessionStorage.getItem('token') === 'token') {
      this.value = false
     }else{
      this.value = true
     }
    }
}
</script>

<style scoped>
* {
  margin: 0px;
  padding: 0px;
}
.bigBox {
    position: relative;
    top: 8%;
    width: 100%;
    font-size: 16px;
    color: #ccc;
}
.addBox {
  position: relative;
  width: 100%;
}
.picBigBox {
    display: flex;
}
.picBox {
    position: relative;
    top: 0;
    margin:0 auto;
    background-color: white;
  }
  .picBox:after {
    content: '';
    display: block;
    clear:both;
  }
  .item {
    float: left;
    padding: 15px 0 0 15px;
  }
  .pic {
    padding: 10px;
    border:1px solid #ccc;
    box-shadow: 0 0 3px #ccc;
    border-radius: 12px;
    width: 300px;
    height: 310px;
    overflow: hidden;
  }
  .pic img {
    transition: 0.5s;
    display: block;
    width: 300px;
    height: 310px;
    object-fit: cover;
  }
  .item:hover img {
    transform: scale(1.15);
  }
  @media only screen and (min-width:1700px) {
    .picBox {
      width: 1700px;
    }
  }
  @media only screen and (min-width:1360px) and (max-width:1700px) {
    .picBox {
      width: 1360px;
    }
  }
  @media only screen and (min-width:1030px) and (max-width:1359px){
    .picBox {
      width:1030px;
    }
  }
  @media only screen and (min-width:700px) and (max-width:1029px){
    .picBox {
      width:700px;
    }
  }
  @media screen and (max-width:700px){
    .picBox {
      width: 337px;
    }
  }
.showPic {
    position: absolute;
    left: 50%;
    top: 46%;
    transform: translate(-50%,-46%);
    width: 100%;
    height: 350px;
    text-align: center;
    border:solid 1px black;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    z-index: 999;
}
</style>